<template>
<div style="padding:0 37px 0 44px" class="main-container-div">
  <div class="breadcrumb-father">
    <div class="new-breadcrumb">
      
      <router-link  :to="{path:'/welcome'}">
        <img src="../../../../assets/imgs/Home.png" alt="">
      </router-link>
      <router-link :to="{path:'/shopAudit'}">{{$t('shop.shopApproval')}}</router-link>
      <span class="arrow">></span>
      <!-- <icon-svg icon-class="setting"></icon-svg> -->
      <span :title="$route.query.name">{{$route.query.name}}</span>
    </div>
  </div>
      <!--店铺审核-->
    <div class="handle_box">
        <ul class="button_box" v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true ">
            <li class="confirm" @click='auditYes(1)'><icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{$t('button.Approve')}}</li>
            <li class="cancel" @click="auditYes(2)"><icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('cash.reject')}}</li>
        </ul><!-- button_box结束 -->
    </div><!-- handle_box结束 -->

    <div class="table-space-div"></div>

    <div class="table-div" id="four">
        <div class="title">{{shopTitleName}}</div>
        <ul class="content">
          <li class="item">
            <div class="left-div">
                <div class="cont">{{$t('agent.Name')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model.lazy.trim="auditShopData.shopName" id="shopName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
          </li> 
          <li class="item">
            <div class="left-div">
                <div class="cont">{{$t('agent.Address')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model.lazy.trim="auditShopData.address" id="address" :readonly="disabled" :class="{'view-input': disabled}" /></div>
          </li> 
          <li class="item">
            <div class="left-div">
                <div class="cont">{{$t('mec.Contact')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model="auditShopData.shopContact" id="shopContact" :class="{'view-input': disabled}" /></div>
          </li> 
          <li class="item">
            <div class="left-div">
                <div class="cont">{{$t('mec.Phone')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model.lazy.trim="auditShopData.phone" id="phone" :readonly="disabled" :class="{'view-input': disabled}" /></div>
          </li> 
          <li class="item">
            <div class="left-div">
                <div class="cont">{{$t('mec.Email')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model.lazy.trim="auditShopData.email" id="email" :readonly="disabled" :class="{'view-input': disabled}" /></div>
          </li> 
          <li class="item" v-if=" companyId == '2' ">
            <div class="left-div">
                <div class="cont">{{$t('AuMer.State')}}:</div>
            </div>
            <div class="right-div"><input type="text" v-model.lazy.trim="auditShopData.continent" id="continent" :readonly="disabled" :class="{'view-input': disabled}" /></div>
          </li> 
        </ul><!-- content结束 -->

        <div class="circle-title">{{$t('mer.ShopPhotos')}}</div>
      <ul class="content" style="display: flex;justify-content: space-around;">
  			<li class="image-item" v-for='(item,index) in shopImgList' :key=index>
          <div class="img-div img-group-div">
  					  <div class="show-div show-group-div">
                <img :src="item.src" @click="handlePictureCardPreview(item.src,0)" />
                <div class="btn-div">
                  <div class="view view-single" @click="handlePictureCardPreview(item.src,0)">{{ $t('button.view') }}</div>
                </div>
              </div>
          </div>
        </li>
  		</ul>

    </div><!-- table-div结束 -->


    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>  
</template>

<script>
import { allShopAjax, singleShop, ShopAudit } from "api/audit/shopAudit/index";
export default {
  name: "shopAuditDetails",
  data() {
    return {
      userPhone:localStorage.getItem('phone'),
      disabled: true,
      shopData: {},
      auditShopData: {},
      shopNewArr: [],
      shopOldData: {},
      shopNewData: {},
      num: 0,
      dataList: [],
      diffData: [],
      companyId: localStorage.getItem("companyId"),
      shopImgList: [],
      AU_State_list:JSON.parse(localStorage.getItem("queryAU_State_list")),
      areaCode:'',
      dialogVisible:false,
      dialogImageUrl:'',
      shopTitleName: '',
    };
  },
  created() {
      this.shopAuditDet();

      setTimeout(function(){
        $("#shopAudit").addClass("is-active");
    },500)
    //   $("#z_auditManage .el-menu a li:eq(1)").addClass('is-active');
  },
  mounted() {
      this.shopTitleName = this.$route.query.name;
      if(this.getStrL(this.$route.query.name) > 50) {
        this.shopTitleName = this.shopTitleName.slice(0,50) + "...";
        $(".table-head").attr('title',this.$route.query.name);
      }
  },
  beforeRouteLeave(to,from, next){
    if(to.path === '/shopAudit'){
      next();
    } else {
      $("#z_auditManage .el-menu a li:eq(1)").removeClass('is-active');
      localStorage.removeItem('shopData');
      next();
    }
  },
  methods: {
    getStrL(str){
      let l = str.length; 
      let blen = 0; 
      for(let i=0; i<l; i++) { 
        if ((str.charCodeAt(i) & 0xff00) != 0) { 
          blen ++; 
        } 
        blen ++; 
      }
      return blen;
    },
    // 点击查看大图
    handlePictureCardPreview(url,index) {
			if(index === 0){
				this.dialogImageUrl = url;	
			} else {
				this.dialogImageUrl = this.auditShopData[url];
			}
      this.dialogVisible = true;
    },
    //店铺详情
    shopAuditDet() {
      const _that = this;
      let shopMsg = {
        shopId: this.$route.query.shopId,
        remarks: this.$route.query.remarks,
        companyId: this.companyId
      };
      singleShop(shopMsg).then(res => {
        this.dataList = res.value;
        this.shopOldData = res.value[1];
        this.shopNewData = res.value[0];
        if (res.value.length == 1) {
          this.auditShopData = this.shopNewData;
        } else {
          this.auditShopData = this.shopNewData;
          this.shopNewArr = Object.getOwnPropertyNames(this.shopNewData);
          for (let i = 0; i < this.shopNewArr.length; i++) {
            const propName = this.shopNewArr[i];
            if (this.shopNewData[propName] !== this.shopOldData[propName]) {
              this.num++;
              this.diffData[this.num] = document.getElementById(propName);
            }
          }
          for (let j = 0; j < this.diffData.length; j++) {
            if (this.diffData[j] != null) {
              this.diffData[j].style.color = "red";
            }
          }
        }
        if(_that.companyId==='2'){
          _that.areaCode = _that.auditShopData.continent;
          for(let n = 0;n<_that.AU_State_list.length;n++){
            if(_that.auditShopData.continent === _that.AU_State_list[n].areaCode){
              _that.auditShopData.continent = _that.AU_State_list[n].areaName;
              break;
            }
          }
        }
        // if (this.auditShopData.shopIndustry) {
        // 	this.industryId = this.auditShopData.shopIndustry;
        // 	this.auditShopData.shopIndustry = Number(this.auditShopData.shopIndustry) - 11;
        // 	this.auditShopData.shopIndustry = this.optionsI[this.auditShopData.shopIndustry].industryName;
        // }

        this.shopImgList[0] = {};
        this.shopImgList[0].src = this.auditShopData.storePhotosUrl;
        this.shopImgList[1] = {};
        this.shopImgList[1].src = this.auditShopData.storePhotosUrl1;
        this.shopImgList[2] = {};
        this.shopImgList[2].src = this.auditShopData.storePhotosUrl2;
        this.shopImgList[3] = {};
        this.shopImgList[3].src = this.auditShopData.storePhotosUrl3;
        this.shopImgList[4] = {};
        this.shopImgList[4].src = this.auditShopData.storePhotosUrl4;
        this.shopImgList[0].id = 0;
        this.shopImgList[1].id = 1;
        this.shopImgList[2].id = 2;
        this.shopImgList[3].id = 3;
        this.shopImgList[4].id = 4;
        for (let i = this.shopImgList.length - 1; i >= 0; i--) {
          if (this.shopImgList[i].src === null) {
            this.shopImgList.splice(i, 1);
          }
        }
      });
    },
    //审核是否通过
    auditYes(value) {
      //				let msg = this.dataList.length === 1 ? this.$t("hint.TheAdditonOf") : this.$t("hint.TheShopInfoChange");
      //				let yes = value === 1 ? this.$t("button.Approve") : this.$t("button.Approve1");
      let msg;
      if (this.dataList.length === 1) {
        //店铺进件申请
        msg =
          value === 1
            ? this.$t("hint.TheAdditonOf8")
            : this.$t("hint.TheAdditonOf9");
      } else {
        //店铺信息修改
        msg =
          value === 1
            ? this.$t("hint.TheAdditonOf6")
            : this.$t("hint.TheAdditonOf7");
      }

      let auditShopData = {
        shopId: this.auditShopData.shopId,
        state: value
      };
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: msg,
        showClose: false,
        closeOnClickModal:false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            this.auditShopData.state = value;
            // this.auditShopData.shopIndustry = this.industryId;
            if(this.companyId ==='2')  this.auditShopData.continent = this.areaCode ;
            this.aduitFn(this.auditShopData);
          }
          done();
        }
      });
    },
    //店铺审核通过与否接口
    aduitFn(state) {
      ShopAudit(state).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: this.$t("hint.Success"),
            message: this.$t("hint.OperationSuccess"),
            type: "success",
            duration: 2000
          });
          this.$router.push({ path: "/shopAudit" });
        } else {
          this.$notify({
            title: this.$t("hint.Fail"),
            message: this.$t("hint.OperationFail"),
            type: "error",
            duration: 2000
          });
        }
      });
    }
  }
};
</script>

<style lang="sass" scoped>
// 返回上一层样式
  .returnTop {
    font-size: 16px;
    font-family: SourceHanSansCN-Bold;
    color: #4964cf;
    position: absolute;
    top: 18px;
    right: 22px;
    font-weight: bold;
    i {
      display: inline-block;
      width: 14px;
      height: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
